<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>赠送钻石</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
    <link rel="stylesheet" type="text/css" href="../../css/vant.css" />
    <!-- <link rel="stylesheet" href="../../css/BarlowCondensed-Bold.woff.ttf" /> -->
    <!-- <link rel="stylesheet" href="../../css/sqc.css"> -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input{

            outline:none;
        }
        .van-password-input__security{
            border-top: 1px solid #f7f4f2;
            border-bottom: 1px solid #f7f4f2;
            border-left: 1px solid #f7f4f2;
        }
        .van-password-input__security li{
            border-right: 1px solid #f7f4f2;
        }
    </style>
</head>

<body style="background: #fff;">
<div id="blank" class="header" v-cloak style="border-bottom:1px solid #f7f4f2;">
    <div v-back.tapmode class="back"></div>
    <div class="title">赠送钻石（QHR）</div>
</div>
<div id="app"  v-cloak style="padding-top:60px;">
    <div class="give-number">
        <div class="give-number-title">赠送数量</div>
        <div class="login-line" >
            <input type="number" v-model="number" placeholder="请输入赠送数量" value="0" onchange="addkk({$row.id})" id="num{$row.id}" onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();">
            <img class="lookpwd-two"  v-src="'../../image/logon_del.png'" v-myclick="deletenumber">
        </div>
        <div class="have-number" style="margin-bottom: 12px;">
            当前拥有数{{experience_list.mymasonry}}个
            <span class="all-give" v-myclick="whole_give">全部赠送</span>
        </div>
        <div class="have-number">
            手续费<span>{{experience_list.buyMoney}}%</span>
            <span style="margin-left: 12px;">实际支出<span>{{total}}</span>个</span>
            <span class="all-give">如何降低手续费</span>
        </div>
        <div class="give-number-title">受赠人信息</div>
        <div class="login-line" >
            <input type="text" v-model="phone" placeholder="请输入受赠人手机号">
            <img class="lookpwd-two"  v-src="'../../image/logon_del.png'" v-myclick="deletephone">
        </div>
        <div class="have-number" style="color: #F95656;">
            短信验证码请向对方索取。赠送给受赠人后，无法撤回，请自行确
            认接收方是否可信。建议只赠送个熟悉的人，避免欺诈风险
        </div>
        <div class="regrist-button" style="margin-bottom:24px;margin-top: 24px;opacity:1;width: 100%;" v-myclick="submission">
          提交
        </div>
        <div class="form-exp" style="padding: 0px;">
            <table border="1" cellspacing="0" style="text-align: center;width: 100%">
                <tr style="width: 88px;height:36px; background-color:#F7F4F2;font-size:12px;">
                    <td>等级</td>
                    <td>要求</td>
                    <td>可交易数</td>
                    <td>交易手续费</td>
                </tr>
                <tr style="height:36px;color:#999;font-size:12px;" v-for="(list,index) in experience_list.list">
                    <td>{{list.empiricalName}}</td>
                    <td>{{list.remarks}}</td>
                    <td>{{list.transactionValue}}</td>
                    <td>{{list.transactionFee}}%</td>
                </tr>
            </table>
        </div>
        <div class="explain" style="margin-bottom: 12px;">
            <div class="exp-method">增加经验值的方法：</div>
            <div style="font-size:12px;">1、每成功<span style="color:#F95656;">邀请</span>一名实名认证的好友获得50经验。</div>
            <div style="font-size:12px;">2、使用钻石<span style="color:#F95656;">兑换任务</span>,也会增加和消耗钻石等额的经验</div>

            <div class="exp-method" style="margin-top:20px;">手续费说明：</div>
            <div style="font-size:12px;">买家收入=总转出*（1-手续费）</div>
        </div>
    </div>

    <van-popup v-model="show" position="bottom" closeable :style="{ height: '65%' }">
        <div class="keyboard_head">
            <div class="keyboard_head_con">输入支付密码</div>
        </div>
        <div style="margin:20px 0;">
            <div style="text-align:center;font-size:15px;margin-bottom:5px;">支付验证</div>
            <div style="text-align:center;font-size:12px;color:#999;">不扣除任何费用</div>
        </div>
        <van-password-input
                :value="value"
                :focused="showKeyboard"
                @focus="showKeyboard = true"
        ></van-password-input>
        <!-- 数字键盘 -->
        <van-number-keyboard
                :show="showKeyboard"
                extra-key="."
                @blur="show = false"
                @input="onInput"
                @delete="onDelete"
        />
    </van-popup>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script type="text/javascript" src="../../script/jquery.js"></script>
<script type="text/javascript" src="../../script/vant.min.js"></script>
<script>
    var vm,
        wx,
        experience_list,
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        })
        wx = api.require('wx');
        var data = {
            wxOpenId:getPrefs('openid'),
            token:getPrefs('token'),
        };
        var callback=function(ret){
            experience_list = ret.content;
            console.log(JSON.stringify(experience_list));
            initApp();
        }
        pinet.post(APIURLP+'/play/user/myEmpiricValue',data, callback);
        api.parseTapmode();
    };

    function initApp() {
        // var isBigImg = Vue.BSImg == 'big';
        vm = new Vue({
            el: '#app',
            data: {
                number:0,
                phone:'',
                total:0,
                show:false,
                value:'',
                showKeyboard:true,
                experience_list:experience_list,
                itemtype: {
                    '0': '50%',
                    '1': '35%',
                    '2': '30%',
                    '3': '25%',
                    '4': '20%',
                }
            },
            computed: {

            },
            methods: {
                whole_give:function(){
                   this.number =this.experience_list.mymasonry;
                },
                operation:function(){
                    this.total= (this.number*(Number(1)+(this.experience_list.buyMoney)/100))
                },
                onInput(key) {
                    this.value = (this.value + key).slice(0, 6);
                },
                onDelete() {
                    this.value = this.value.slice(0, this.value.length - 1);
                },
                submission:function(){
                    this.show = true;

                },
                deletephone:function(){
                    this.phone=''
                },
                deletenumber:function(){
                    this.number=0;
                },
                reloder:function () {
                    var data = {
                        wxOpenId:getPrefs('openid'),
                        token:getPrefs('token'),
                    };
                    var callback=function(ret){
                        vm.experience_list = ret.content;
                        console.log(JSON.stringify(vm.experience_list));
                    }
                    pinet.post(APIURLP+'/play/user/myEmpiricValue',data, callback);
                },

            },
            watch: {
                number:function(){
                  this.operation();
                },
                value:function (value) {
                    if(value.length >=6){
                        var data = {
                            wxOpenId:getPrefs('openid'),
                            token:getPrefs('token'),
                            phone:this.phone,
                            masonryCount:this.number,
                            payPw:this.value
                        };
                        var callback=function(ret){
                            api.toast({
                                msg: '支付成功',
                                duration: 2000,
                                location: 'bottom'
                            });
                            vm.value='';
                            vm.number = '';
                            vm.phone= '';
                            vm.show = false;
                            vm.reloder();
                        }
                        pinet.post(APIURLP+'/play/user/myGive',data, callback);

                    }
                }
            },
        })
    }

</script>

</html>
